TypeScript + ES6

TypeScript = 微软开发+Js超集+遵循ES6

优势

（1）支持ES6规范
（2）强大的IDE支持
（3）Angular2的开发语言

搭建TS开发环境

（1）在线环境 http://www.typescriptlang.org...
（2）搭建环境

1.npm install -g typescript
2.tsc -v

字符串的新特性

1.多行字符串

var content = `aaa
bbb
ccc`

2.字符串模板

var myname = "xiaoxiannv";
var getName = function(){
    return "xiaoxiannv";
}
console.log(`hello ${myname}`);
console.log(`hello ${getName()}`);

3.自动拆分字符串

function test(template,name,age){
    console.log(template);
    console.log(name);
    console.log(age);
}
var myname = "xiaoxiannv";
var getAge = function(){
    return 17;
}

4.用字符串模板去调用test方法

test`hello my name is ${myname}, i am ${getAge()}`;

参数的新特性

（1）参数类型：在参数名称后面使用冒号来指定参数的类型；

var myname:string = "xiaoxiannv";
//编辑器会报错
myname = 13;

//ts类型推断机制，会在第一次赋值的时候推断变量类型
var alias = "xixi";
alias = 14;

var tom:any = "xixixi";
tom = 16;

//类型
// number boolean

function test(name:string):string{
    return "";
}
test("123");

//自定义类型
class Person{
    name:string;
    age:number;
}
var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 17;

（2）默认参数：在参数生命后面使用等号来指定参数的默认值；

var myname:string = "zhangsan";
function test(a:string,b:string,c:string = "ccc"){
    console.log(a);
    console.log(b);
    console.log(c);
}
test("aaa","bbb");
//带默认值的参数一定要声明在最后面

（3）可选参数：在方法的参数声明后面用问号来表明此参数为可选参数；

function test(a:string,b?:string,c:string = "ccc"){
    console.log(a);
    console.log(b);
    console.log(c);
}
test("aaa","bbb");
test("aaa");
//可选参数不能放在必填参数前

函数的新特性

（1）Rest and Spread 操作符：用来声明任意数量的方法参数；

function func1(...args){
//可以传入任意数量的方法
function func1(...args){
    //可以传入任意数量的方法
    args.forEach(function (arg){
        console.log(arg)
    });
}
func1(1,2,3);
func1(1,2,3,4,5,6);

（2）generator函数：控制函数的执行过程，手工暂停和恢复代码执行；

function func2(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}

function* doSomething(){
    console.log("start");
    yield;
    console.log("finish");
}

var func1 = doSomething();
func1.next();//start
func1.next();//finish

（3）destructuring解构赋值：

function getStock(){
    return {
        code:"IBM",
        price:{
            price1:200,
            price2:300
        }
    }
}
var {code, price} = getStock();
var {code: codex, price: {price2}} = getStock();

var arr1 = [1,2,3,4,5];
var [num1, num2] = arr1;
var [, , num1, num2] = arr1;//3 4
var [num1, num2, ...others] = arr1;//others [3,4]

表达式和循环

（1）箭头表达式：用来声明匿名函数，消除传统匿名函数的this指针问题； 箭头函数是对函数声明的一种补充！

var sum = (arg1, arg2) => arg1 + arg2;
var myArray = [1,2,3,4,5];
console.log(myArray.filter(value => value%2 == 0));

function getStock(name:string){
    this.name = name;
    setInterval(function(){
        console.log("name is :" + this.name);
    }, 1000);
}

function getStock2(){
    this.name = name;
    setInterval(() => {
        console.log("name is :" + this.name);
    }, 1000);
}

（2）forEach(),for in ,for of;

var myArray = [1,2,3,4];
myArray.desc = "four number";

myArray.forEach(value => console.log(value));
//忽略属性，不允许打破循环，没有break

for (var n in myArray){
    console.log(n);
    //0 1 2 3 desc
    //循环的数据对象里边属性的名字
    console.log(myArray[n]);
    // 1 2 3 4 four number
} 

for(var i of myArray){
    console.log(i);
    if( i > 2) break;
    //忽略属性，可以打断
}

面向对象特性

（1）类 class：类是TS的核心，使用TS开发时，大部分代码都是写在类里面的；

class Person{
    name;
    //private name;
    //私有的不能在类的外部访问;
    //protected name;
    //可以在类的内部以及类的子类中被访问，类的外部不能被访问;
    eat(){
        console.log("i am eating");
    }
}

var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

class Person{
    // name;
    // //实例化的时候被调用，只会被调用一次，不能在外部访问;
    // constructor(name:string){
    //     this.name = name; 
    // }
    constructor(public name: string){

    }
    eat(){

    }
}
var p1 = new Person("zhangsan");

extends 用来声明类的继承关系;
super 用来调用父类的构造函数或者方法;

class Employee extends Person {
    code: string;
    constructor(name: string, code: string){
        //子类的构造函数必须要调用父类的构造函数--硬性规定？
        super(name);
        this.code = code;
    }
    work(){
        super.eat();
        this.doWork();
    }
    private doWork(){
        console.log("i am working");
    }
}
var e1 = new Employee("name","1");

（2）泛型（generic）：参数化的类型，一般用来限制集合的内容；

var worker:Array<Person> = [];
worker[0] = new Person("zhangsan");

（3）接口（Interface）：用来建立某种代码约定，使得其他开发者在调用某个方法或者创建新的类时必须遵循接口所定义的代码约定；

interface IPerson {
    name:string;
    age:number;
}

class Person{
    constructor(public config: IPerson){
    //作为一个方法的参数的类型声明;
    }
}
var p1 = new Person({
    name:"zhangsan",
    age:1
})

interface Animal {
    eat();
    //用接口来声明方法
}

class Sheep implements Animal{
//绵羊这个类实现动物这个接口，必须要实现接口里声明的方法;
    eat() {
        console.log("i eat grass");
    }
}

class Tiger implements Animal{
    eat() {
        console.log("i eat meat");
    }
}

（4）模块（Module）：模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内部使用。

export

import

（5）注解（annotation）：注解为程序的元素（类、方法、变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用的。

（6）类型定于文件（*.d.ts）：类型定义文件用来帮助开发者在TS中使用已有的Js工具包，如：JQuery